<!DOCTYPE html>
<html>

		<meta charset="utf-8">
		<title>倾斜</title>
	</head>
	<style>
		#test {
			height: 30px;
			width: 200px;
			background: red;
			-webkit-transform: skew(0deg,0deg);
			-webkit-transform-arigin:left top;
			-webkit-transition:-webkit-transform 1s linear;
		}
		#test:hover{
			-webkit-transform: skew(0deg,90deg);
		}
			
	</style>

	<body>
		<div id="test"></div>
	</body>

</html>